<script setup>
import { ref, computed } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import ToDoItems from './components/ToDoItems.vue'
import Student from './components/Student.vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <!-- <HelloWorld msg="Vite + Vue + 355" />

  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>

  <ToDoItems :todos="filteredTodos" @removeTodo="removeTodo"></ToDoItems>

  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button> -->

  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Home</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/about?age=18">About</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/stu/张三">Student</router-link>
    &nbsp;&nbsp;&nbsp;
    <router-link to="/user/1/profile">/user/1/profile</router-link>
    &nbsp;&nbsp;&nbsp;
    <router-link to="/user/1/posts">/user/1/post</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>

<style scoped>

</style>
